
<template>
  <div class="browsegoods">
      <div class="good" v-for="(item) in list" :key='item.id' @click="toGoodInfos(item)">
        <img :src="item.img" alt="未加载图片" >
        <div class="mui-ellipsis-2 title" >
          {{item.name}}
        </div>
        <div class="bottom">
          <div>
            <span class="now-price">￥{{item.new_price}}</span> <span class="old-price">￥{{item.old_price}}</span>
          </div>
          <div class="hot">
            <span>{{item.status}}</span>
            <span>剩{{item.left_count}}</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'browsegoods',
  data() { 
    return {
      list:[
       
      ]
    }
  },
  mounted() {
      this.$http.post('http://192.168.0.197:88/getGoods',{pageNo:"1",pageSize:"10"},{emulateJSON:true}).then(function(res){
        this.list=res.body.data  
        
    });
    
  },
  methods: {
    toGoodInfos(item){

        this.$router.push({name:'goodsinfo',params:{option:item}});
        window.localStorage.setItem('goods',JSON.stringify(item))
    }
  },
 }
</script>

<style lang="" scoped>
.browsegoods{
  display:flex;
  justify-content: space-between;
  
  flex-wrap: wrap;
  margin: 10px 10px ;
}
.good{
  
  box-shadow: -1px -2px 8px rgb(158, 153, 153);
  width: 48%;
  padding: 3px;
  margin-bottom: 8px;
  display: flex;
  background: #fff;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: auto;
}
.title{
  font-size: 12px;
  line-height: 12px;
  font-weight: bold;
}
.good img{
  height: 66%;
  width: 95%;
}
.bottom{
  background: #e6e6e6;
  width:100%;
  height: 22%;
  padding: 5px 5px 10px 5px ;
  box-sizing: border-box;
}
.hot{
  font-size: 12px;
  color: #666;
  display:flex;
  padding-bottom: 3px ;
  box-sizing: border-box;
  justify-content: space-between;
}
.now-price{
  font-size: 15px;
  color:red;
}
.old-price{
  font-size: 10px;
  color:#777;
  text-decoration: line-through;
}
</style>
